<template>
  <el-segmented class="menu" v-model="currentStatus" :options="statusList" block>
    <!-- <template #default="{ item }">
      <span>{{ item.label }}({{ item.value }})</span> -->
      <!-- <el-badge :value="item.value" :show-zero="false" :offset="[6, 0]">{{ item.label }}</el-badge> -->
    <!-- </template> -->
  </el-segmented>
  <header class="search">
    <el-input v-model="searchInput" @clear="onReset" placeholder="请输入名称查询" />
    <el-button type="primary" @click="onSearch">查询</el-button>
  </header>
  <main class="list">
    <Empty v-if="!list.length" />
    <template v-else>
      <ul class="list-main">
        <li class="list-main-item list-item" :class="{ active: item.id == currItem.id }" v-for="item, index in list" :key="index" @click="onClickItem(item)">
          <section class="list-item-info">
            <header class="list-item-info-title">
              <section class="list-item-info-title-left">
                <h5 class="list-item-info-title-text" :title="`名称: ${item.mc} 编号: ${item.bh}`">{{ item.mc }}</h5>
                <el-tag v-if="item.zt == DUTY_ISSUED_STATUS['未开始']" type="warning" size="small">未开始</el-tag>
                <el-tag v-else-if="item.zt == DUTY_ISSUED_STATUS['进行中']" type="primary" size="small">进行中</el-tag>
                <el-tag v-else-if="item.zt == DUTY_ISSUED_STATUS['已完成']" type="success" size="small">已完成</el-tag>
                <el-tag v-else type="danger" size="small">状态异常</el-tag>
              </section>
              <el-button type="primary" size="small" @click="onIssued">下发</el-button>
            </header>
            <main class="list-item-info-main">
              <section class="list-item-info-main-item">
                <h6 class="list-item-info-main-item-title">创建人</h6>
                <span>{{ item.cjr }}</span>
              </section>
              <section class="list-item-info-main-item">
                <h6 class="list-item-info-main-item-title">创建单位</h6>
                <span>{{ item.cjrbm }}</span>
              </section>
              <section class="list-item-info-main-item">
                <h6 class="list-item-info-main-item-title">活动时长</h6>
                <em>10天6小时30分</em>
              </section>
            </main>
            <footer class="list-item-info-footer">
              <section class="list-item-info-footer-item"><Clock /><span>创建时间：{{ item.cjsj }}</span></section>
              <section class="list-item-info-footer-item"><Clock /><span>活动时间：{{ item.kssj }} ~ {{ item.jssj  }}</span></section>
              <section class="list-item-info-footer-item" :title="item.ms"><Postcard /><span>活动描述：{{ item.ms }}</span></section>
            </footer>
          </section>
        </li>
      </ul>
      <el-pagination
        class="list-pagination"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        background
        size="small"
        :pager-count="5"
        layout="total, prev, pager, next"
        :total="pagination.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </template>
    <IssuedFormDialog ref="asideFormDialogRef" :name="currItem.mc" @submited="onSearch(false)" />
  </main>
</template>

<script setup>
import { ref, reactive, onMounted, useTemplateRef } from 'vue'
import { issuedApi } from '@/api/DutyManage'
// import { dayjs } from 'element-plus'
import { Promotion, Clock, Postcard } from '@element-plus/icons-vue'
import { DUTY_ISSUED_STATUS, DUTY_ISSUED_STATUS_KEY } from '@/views/DutyManage/config'
import IssuedFormDialog from './IssuedFormDialog.vue'

const emits = defineEmits(['clickItem'])

onMounted(() => {
  getCount();
  onSearch();
})

const issuedFormDialogRef = useTemplateRef('asideFormDialogRef');
const statusList = ref([]);
const currentStatus = ref(DUTY_ISSUED_STATUS['未开始']);

const currItem = reactive({});
const searchInput = ref('');
const list = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const onIssued = () => {
  issuedFormDialogRef.value.show('add');
} 

const onClickItem = (item) => {
  Object.assign(currItem, item);
  emits('clickItem', item);
}

const onSearch = () => {
  pagination.currentPage = 1;
  getList();
}

const onReset = () => {
  searchInput.value = '';
  onSearch();
}

const getCount = async () => {
  try {
    const res = await issuedApi.asideCount({});
    statusList.value = Object.entries(DUTY_ISSUED_STATUS_KEY).map(([key, label]) => ({
      label: `${label}(${res.data[key]})`,
      value: DUTY_ISSUED_STATUS[label]
    }))
  } catch (error) {
    console.error(error);
  }
}

const getList = async () => {
  console.log('getAsideList');
  try {
    const res = await issuedApi.asideList({});
    list.value = res.data.records;
    pagination.total = res.data.total;
    onClickItem(res.data.records[0]);
  } catch (error) {
    console.error(error);
  }
}

const onSizeChange = value => {
  pagination.currentPage = 1;
  pagination.pageSize = value;
  getList();
}

const onCurrentChange = value => {
  pagination.currentPage = value;
  getList();
}
</script>

<style lang="scss" scoped>
@use '@/styles/components/asideList.scss';

.list-item {
  display: flex;
  align-items: center;

  // &-icon {
  //   flex-shrink: 0;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   height: 48px;
  //   width: 48px;
  //   border-radius: var(--el-border-radius-base);
  //   background-color: var(--el-color-primary-light-9);

  //   svg {
  //     fill: var(--el-color-primary);
  //   }
  // }

  &-info {
    flex: 1;
    overflow: hidden;
    // margin-left: var(--ycy-gap-base);
    // margin-right: var(--ycy-gap-base);
    
    .list-item-info-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--ycy-gap-small / 2);

      &-left {
        display: flex;
        align-items: center;
      }

      &-text {
        font-weight: bold;
        font-size: var(--el-font-size-medium);
        margin-right: var(--ycy-gap-small);
      }
    }

    .list-item-info-main {
      margin-top: var(--ycy-gap-base);
      display: flex;
      justify-content: space-between;
      padding: var(--ycy-gap-base);
      border-radius: var(--el-border-radius-base);
      background-color: var(--el-fill-color-light);

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        

        &-title {
          font-size: var(--el-font-size-small);
          color: var(--el-text-color-secondary);
        }

        span {
          font-weight: 500;
          font-size: var(--el-font-size-base);
          color: var(--el-text-color-primary);
        }

        em {
          font-weight: 500;
          font-style: normal;
          color: var(--el-color-primary);
        }
      }
    }

    .list-item-info-footer {
      margin-top: var(--ycy-gap-base);
      color: var(--el-text-color-secondary);
      font-size: var(--el-font-size-small);

      &-item {
        display: flex;
        align-items: center;

        svg {
          width: 14px;
          font-weight: bold;
          margin-right: calc(var(--ycy-gap-small) / 2);
        }

        span {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }

  &-action {
    .el-button {
      font-size: var(--el-font-size-large);
    }

    .el-button + .el-button {
      margin-left: var(--ycy-gap-small);
    }
  }
}
</style>